<template>
    <div>
        <div class="tabbarBox">
            <van-tabbar v-model="active" route active-color="#fbef1a" inactive-color="#8e8989">
                <van-tabbar-item to="/index">
                    <span>首页</span>
                    <template #icon="props">
                        <img :src="props.active ? icon.active : icon.inactive" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item to="/assignment">
                    <span>任务列表</span>
                    <template #icon="props">
                        <img :src="props.active ? icon2.active : icon2.inactive" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item to="/myAssignment">
                    <span>我的任务</span>
                    <template #icon="props">
                        <img :src="props.active ? icon3.active : icon3.inactive" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item to="/livingCircle">
                    <span>生活圈</span>
                    <template #icon="props">
                        <img :src="props.active ? icon3.active : icon3.inactive" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item to="/my">
                    <span>我的</span>
                    <template #icon="props">
                        <img :src="props.active ? icon4.active : icon4.inactive" />
                    </template>
                </van-tabbar-item>

            </van-tabbar>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                active: 0,
                icon: {
                    active: require('../../assets/img/outline-heart.png') ,
                    inactive:require('../../assets/img/outline-heart (1).png'),
                },
                icon2: {
                    active: require('../../assets/img/outline-like.png') ,
                    inactive:require('../../assets/img/outline-like (1).png'),
                },
                icon3: {
                    active: require('../../assets/img/outline-heart-edit.png') ,
                    inactive:require('../../assets/img/outline-heart-edit (1).png'),
                },
                icon4: {
                    active: require('../../assets/img/outline-lovely.png') ,
                    inactive:require('../../assets/img/outline-lovely (1).png'),
                },
            }
        },
        methods:{

        },

    }
</script>
<style lang="less">
    .tabbarBox{
        width: 100px;
        position: fixed;
        z-index: 1001;
        bottom: 0px;
        left: 0;

    }
</style>